<template>
    <div id="ScrollAD">
        <swiper :options="swiperOption">
        <swiper-slide v-for="(item,key) in speclist" :key="key">
          <img :src=item.imageurl  alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    data() {
      return {
        swiperOption: {
          spaceBetween: 30,
          centeredSlides: true,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        },
          speclist:[]
      }
    },
    components:{
      swiper,
      swiperSlide
    },
    created(){
      var _this = this;
      this.$http.get(this.$baseUrl+'/api/scrillad').then(function(response){
            if(response.data){
                // console.log(response.data);
               _this.speclist =  response.data.info;
               console.log(_this.speclist)
            }
        }).catch(function(error){
            console.log(error);
        }) 
    }
}
</script>
<style lang="scss" scoped>
    #ScrollAD {
        margin-top: 54px;
        width: 100%;
        height: 200px;
        img {
            width: 100%;
            height: 180px;
        }
    }
</style>
